'use strict';

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import {
  Paper,
  Typography,
} from '@material-ui/core'


import MUInput from '../../forms/input'
import MUSelect from '../../forms/select'
import MUASyncSelect from '../../forms/asyncSelect'
import MUCreatableSyncSelect from '../../forms/creatableSyncSelect'

const electron = window.require('electron')

const styles = theme => ({
  root: {
    width: window.innerWidth - 100,
    margin: 10,
    height: 142,
    // backgroundColor: '#CCC',
    borderRadius: 0,
  },
  search: {
    marginTop: 16,
  },
  row: {
    height: 60
  },
  twoRow: {
    height: 100
  }
});

class PatientBlock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      fullname: '',
      age: '',
      weight: '',
      doctor: '',
      depart: ''
    }
    let res = electron.ipcRenderer.sendSync('url', 'api/departs')
    this.departs = res && JSON.parse(res).datas || []
    for (let k = 0; k < this.departs.length; k += 1) {
      this.departs[k].label = this.departs[k].title
      this.departs[k].value = this.departs[k]._id
    }
    res = electron.ipcRenderer.sendSync('url', 'api/doctors')
    this.doctors = res && JSON.parse(res).datas || []
    for (let k = 0; k < this.doctors.length; k += 1) {
      this.doctors[k].label = this.doctors[k].profile.nickname
      this.doctors[k].value = this.doctors[k].profile.nickname
    }
  }

  fetch(_id) {
    let state = electron.ipcRenderer.sendSync('getPatient', _id)
    if (state === null) {
      return this.setState({
        fullname: '',
        age: '',
        weight: '',
        doctor: '',
        depart: '',
        did: '',
        gender: '',
        doctor: '',
        depart: '',
        complaint: '',
        diagnosis: '',
      })
    } else {
      this.setState(state.state)
    }
  }
  componentDidMount() {
    this.fetch(this.props._id)
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps._id !== undefined) {
      this.fetch(nextProps._id)
    }
    if (nextProps.patient !== undefined && nextProps.patient.ID !== undefined) {
      this.setState({
        ID: nextProps.patient,
      })
      const states = this.state
      states.ID = nextProps.patient
      electron.ipcRenderer.send('patient', {
        _id: this.props._id,
        state: states
      })
    }
  }

  handleChange(state, e) {
    let states = this.state
    if (state === 'gender') {
      this.setState({
        [state]: e
      })
      states[state] = e
    } else if (state === 'depart') {
      this.setState({
        [state]: e
      })
      states[state] = e
    } else if (state === 'doctor') {
      this.setState({
        [state]: e
      })
      states[state] = e
    } else if (state === 'fullname') {
      this.setState({
        [state]: e,
        age: e.age,
        gender: {label: e.gender, value: e.gender},
        weight: e.weight,
        ID: e.ID
      })
      states[state] = e
      states.age = e.age
      states.gender = {label: e.gender, value: e.gender}
      states.weight = e.weight
      states.ID = e.ID
    } else {
      this.setState({
        [state]: e.target.value
      })
      states[state] = e.target.value
    }
    electron.ipcRenderer.send('patient', {
      _id: this.props._id,
      state: states
    })
  }
  
  render() {
    const { classes } = this.props
    return (
      <Paper className={classes.root}>
        <Typography>基本信息</Typography>
        <form>
          <div className={classes.row}>
            <MUCreatableSyncSelect
              required
              label={`姓名${this.state.ID||''}`}
              width={200}
              url={`api/patients${this.state.fullname}`}
              value={this.state.fullname}
              onChange={(e) => this.handleChange('fullname', e)}
            />
            <MUSelect
              label='性别'
              required
              width={120}
              options={[
                {idx: '1', label: '男', value: '男'},
                {idx: '0', label: '女', value: '女'},
              ]}
              value={this.state.gender || ''}
              onChange={(e) => this.handleChange('gender', e)}
            />
            <MUInput
              label='年龄'
              width={120}
              value={this.state.age || ''}
              onChange={(e) => this.handleChange('age', e)}
            />
            <MUInput
              label='体重(Kg)'
              width={120}
              value={this.state.weight || ''}
              onChange={(e) => this.handleChange('weight', e)}
            />
            <MUSelect
              required
              label='医生'
              width={120}
              options={this.doctors || []}
              value={this.state.doctor}
              onChange={(e) => this.handleChange('doctor', e)}
            />
            <MUSelect
              required
              label='科室'
              width={120}
              options={this.departs || []}
              value={this.state.depart || ''}
              onChange={(e) => this.handleChange('depart', e)}
            />
            <MUInput
              label='主诉'
              width={436}
              value={this.state.complaint || ''}
              onChange={(e) => this.handleChange('complaint', e)}
            />
          </div>
          <div className={classes.row}>
            <MUInput
              label='主要诊断'
              width={1260}
              value={this.state.diagnosis || ''}
              onChange={(e) => this.handleChange('diagnosis', e)}
            />
          </div>
        </form>
      </Paper>
    )
  }
}

PatientBlock.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(PatientBlock);